<template>
    <div class="container">
        <div class="ContainerLF">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
               <!--  <el-radio-button label="top">top</el-radio-button>
                <el-radio-button label="right">right</el-radio-button>
                <el-radio-button label="bottom">bottom</el-radio-button>
                <el-radio-button label="left">left</el-radio-button> -->
            </el-radio-group>

            <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
            </el-tabs>
        </div>
   
        <div class="ContainerRT">
            右侧区域
            <div class="conTop">
                <span>上侧图表区</span>

            </div>
            <div class="conBotton">
                <span>下侧图表区</span>

            </div>
        </div>

    </div>

</template>

<script>
  export default {
    data() {
      return {
        tabPosition: 'left'
      };
    },
    methods: {
      
    }
  };

</script>
<style lang="less" scoped> 
.container{
    display: flex;
}
.ContainerLF{
    width: 60%;
    height: 100vh;
   
}
.ContainerRT{
    
    width: 40%;
    height: 100vh;
    border: 1px solid black;
 
  
    .conTop{
    position: relative;
    width: 300px;
    height: 300px;

       
     
        
    }
    .conBottom{
    position: relative;
    width: 300px;
    height: 300px;
        
    }
  
    
}

</style>